<template>
    <div>
        部门：
        <select v-model="checkedDept">
            <option v-for="_dept in dept" :key="_dept.id" :value="_dept.id">{{_dept.name}}</option>
        </select>
        职位：
        <select v-model="checkedPosition">
            <option v-for="_dept in positionList" :key="_dept.id" :value="_dept.id">{{_dept.name}}</option>
        </select>
        <p>
            当前选择的信息：{{checkedResuit}}======{{resultVal}}
        </p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dept: [],
                positionList: [],
                checkedDept: '',
                checkedPosition: '',
                checkedResuit: ''
            }
        },

        created() {
            this.dept = Array.from(Array(7),(_,i) => {
                return {id: 'dept' + i, name: '公司部门' + i }
            })
            this.dept.unshift({id: '', name: '请选择部门'})
        },

        // 观察属性
        watch: {
            checkedDept(newValue, oldValue) {
                this.ajax(newValue).then(data => {
                    data.unshift({id: '', name: '请选择职位'})
                    return this.positionList = data
                })
                this.checkedResuit = newValue
            },
            checkedPosition(val) {
                this.checkedResuit = this.checkedDept + ',' + val
                console.log(val)
            }
        },
        // 计算属性
        computed: {
            resultVal() {
                return this.checkedDept + '--' + this.checkedPosition
            }
        },
        methods: {
            ajax(newValue) {
                return new Promise(resolve => {
                    let list = Array.from(Array(12),(_,i) => {
                    return {id: 'position' + i, name: newValue + '公司职位' + i }
                    })
                    
                    resolve(list)
                })
            }
        }
    }
</script>